<template>
  <div class="app-container">
    <PageSearch
      :showSearch.sync="showSearch"
      :getList="getList"
      :handleQuery="handleQuery"
      :resetQuery="resetQuery">
      <template #pagination>
        <pagination
          v-show="pageTotal > 0"
          :total="pageTotal"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList" />
      </template>
      <template #form>
        <el-form :model="queryParams" ref="queryForm" size="small">
          <el-row>
            <el-form-item prop="skuNo">
              <el-input
                v-model="queryParams.skuNo"
                :placeholder="$t('sku编号')"
                clearable
                @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item prop="">
              <el-input
                v-model="queryParams.spNo"
                :placeholder="$t('库位号')"
                clearable
                @keyup.enter.native="handleQuery" />
            </el-form-item>
            <!-- 是否绑定SKU：isBindingSku
                0-全部
                1-未绑定
                2-绑定 
              -->
            <el-form-item label-width="120" prop="isBindingSku">
              <el-select :placeholder="$t('是否绑定SKU')" v-model="queryParams.isBindingSku">
                <el-option label="全部" value="0" />
                <el-option label="未绑定" value="1" />
                <el-option label="绑定" value="2" />
              </el-select>
            </el-form-item>
            <el-form-item prop="distrName">
              <el-input
                :placeholder="$t('供应商名称')"
                v-model="queryParams.distrName"
                clearable
                @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item prop="skuNameCn">
              <el-input
                v-model="queryParams.skuNameCn"
                :placeholder="$t('中文名')"
                clearable
                @keyup.enter.native="handleQuery" />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item prop="skuNameJp">
              <el-input
                v-model="queryParams.skuNameJp"
                :placeholder="$t('日文名')"
                clearable
                @keyup.enter.native="handleQuery" />
            </el-form-item>
          </el-row>
        </el-form>
      </template>
      <template #actions> </template>
    </PageSearch>
    <el-table
      :height="calTableHeight()"
      v-loading="loading"
      ref="TableRef"
      :data="tableData"
      row-key="menuId">
      <el-table-column align="center" show-overflow-tooltip prop="spNo" :label="$t('库位号')" width="120">
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="skuNo" :label="$t('sku编号')" >
      <template slot-scope="scope">
        <div @click="handleEdit(scope.row)" style="cursor: pointer; color: #1890ff">
            {{ scope.row.skuNo }}
          </div>
          </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="skuNameCn" label="sku中文名" width="120">
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="distrName" label="租户名称" />
    </el-table>

    <pagination
      :page-sizes="[100, 200, 300, 500]"
      v-show="pageTotal > 0"
      :total="pageTotal"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList" />
       <!-- sku详情/修改 -->
    <Skucontmoduler @relaod="relaod" :isShowAll="false" ref="Skucontmoduler"></Skucontmoduler>
  </div>
</template>

<script>
import Skucontmoduler from '@/components/Skucontmoduler'
import { getSkuList, getStockPositionList } from '@/api/distribution/sku/inventoryLocationlList'
export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  name: 'InventoryAbandonmentList',
  components: {  Skucontmoduler },
  data() {
    return {
      showSearch: false,
      skuDataList: [],
      queryData: {
        pageSize: 10,
        pageNum: 1,
        total: 0,
        skuNo: '',
        skuNameCn: '',
      },

      editDialogConfig: false,
      tableData: [],
      /**数据总条数 */
      pageTotal: 0,
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        isBindingSku: '0',
      },
    }
  },
  created() {
    this.getList()
  },
  methods: {
    relaod() {
      this.getList()
    },
    handleEdit(row) {
      this.$refs.Skucontmoduler.setSkuInfo(row)
      this.$refs.Skucontmoduler.checkNumber('basicInformation')
    },
    // 获取库位下拉列表
    StockPositionList() {
      getSkuList(this.queryData).then((res) => {
        this.queryData.total = res.total
        this.skuDataList = res.rows
      })
    },

    // 重置sku
    cancelSku(value) {
      this.addInfo.form.num = null
      this.addInfo.show = false
    },

    // 取消申请
    cancel() {
      this.editDialogConfig = !this.editDialogConfig
    },

    /** 查询菜单列表 */
    getList() {
      this.loading = true
      getStockPositionList({
        ...this.queryParams,
        type: 2,
      }).then((res) => {
        this.tableData = res.rows
        this.pageTotal = res.total
        this.loading = false
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.value1 = null
      Object.keys(this.queryParams).forEach((key) => {
        this.queryParams[key] = null
      })
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10

      this.getList()
    },

    /** 展开/折叠操作 */
    toggleExpandAll() {
      this.refreshTable = false
      this.isExpandAll = !this.isExpandAll
      this.$nextTick(() => {
        this.refreshTable = true
      })
    },
  },
}
</script>

<style lang="scss"></style>
